<template>
  <div class="main wh-full">
    <el-container class="main-container">
      <el-main>
        <div class="container2 cc_main">
          <!-- 标题栏 -->
          <div class="top_title flex flex-between">
            <div class="top_title flex">
              <h3 class="font-24 font-bold">法币交易我的挂单记录</h3>
              <p class="font-12 pright">支持法币与数字资产大额交易</p>
            </div>
          </div>
          <!-- 内容部分 -->
          <div class="alltrad_box m-top-10">
            <template>
							<el-table
                    max-height='500'
                    v-loading='showLoading'
                    :header-cell-style="{'background-color':'#ffffff','color':'#777777','font-weight':'bold'}"
                    :data='tableData'>
                    <el-table-column prop='autoid' label='订单ID' width='80'></el-table-column>
                    <el-table-column prop='writedate' :label='$t("time")||"时间"'  width='190'></el-table-column>
                    <el-table-column prop='coin' :label='$t("currencyType")||"币种"'></el-table-column>
                    <el-table-column width='120' label='类型' >
                      <template slot-scope="scope" >
                       <span 
                        :class="scope.row.type=='buy'?'color-success':'color-danger'"
                        v-text="scope.row.type=='buy'?$t('buy'):$t('sell')">
                      </span>
                      </template>
                    </el-table-column>
										<el-table-column
												prop='wdate'
												:label='$t("ptxt102")'  width="160"
											>
												<template slot-scope="scope">
													<span :data-id="scope.row.number">
														<el-tag type="warning" size="mini" v-if="scope.row.bankcard=='enable'">银行卡</el-tag>
														<el-tag type="" size="mini" v-if="scope.row.zfb=='enable'">支付宝</el-tag>
														<el-tag type="success" size="mini" v-if="scope.row.wx=='enable'">微信</el-tag>
													</span>
												</template>
										</el-table-column>
                    <el-table-column prop='number' :label='$t("amount")||"数量"'></el-table-column>
                    <el-table-column prop='price' :label='($t("unitPrice")||"单价")+"（CNY）"'></el-table-column>
                    <el-table-column prop='member' label='户主'></el-table-column>
                    <el-table-column width='200' :label='$t("status")||"状态"' >
                      <template slot-scope="scope" >
                        <span v-if="scope.row.state=='unfilled'" class="m-right-10">未成交</span>
                        <span v-if="scope.row.state=='section'" class="m-right-10">部分成交</span>
                        <span v-if="scope.row.state=='all'" class="m-right-10">全部成交</span>
                        <span v-if="scope.row.state=='unusual'" class="m-right-10">异常</span>
                        <span v-if="scope.row.state=='cancel'" class="m-right-10">已取消</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <!-- <el-button  size="mini"  type="danger"  @click="SeeRowinfo(scope.$index, scope.row)">详情</el-button> -->
                        <!-- <el-button  size="mini"  type="danger"  @click="goTrade('/FabiNew/FBorder_info',scope.$index, scope.row)">详情</el-button> -->
                        <el-button type="text" @click="close_entrustBtn(scope.$index, scope.row)">撤销</el-button> 
                      </template>
                    </el-table-column> 
                  </el-table>
						</template>
          </div>
          <!--  -->
        </div>
      </el-main>
    </el-container>
    
  </div>
</template>

<script>
import { checkTradePassword } from "../../service/TradeService.js";
import axios from "axios";
export default {
  data() {
    return {
      userData: this.userModel,
      showDialog: false,
      tableData: [],
      showLoading:false,
    };
  },
  computed: {
    
  },
  mounted() {
    if (!this.userData.isLogin) {
        // this.errMsg("label120" || "请登录后操作");
        return false;
    }else{
        this.entrust_order();//我的挂单
    }    
    
  },
  methods: {
		entrust_order() {
      this.request(this.api.entrust,).then(res => {
        this.showLoading = true;
        if (res.code == "0" && res.data) {
          this.showLoading = false;
          this.tableData=res.data;
        }
      });
    },
    // 撤单
    close_entrustBtn(index, row) {
        console.log(index, row);
        const autoid =row.autoid;
        this.$confirm('此操作将撤销该笔订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return this.request(this.api.close_entrust,{autoid:autoid,}).then(
            res => {
              if(res.code==0){
                this.$message({
                  message: res.msg,
                  type: 'success'
                });
                this.tableData=[];
                this.entrust_order();
              }else{
                this.$message.error(res.msg);
              }
              
            }
          );
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });   
    },
    // questc2corder 投诉、申诉订单
    questc2corder(index, row){
      const autoid =row.autoid;
        this.$confirm('确定投诉该笔订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.questc2corderProp=true;
          this.SeerowData = row;
          this.parautoid=autoid;
          return
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });  
    },
    //跳转
    goTrade(api, index, row) {
      console.log(row);
      const maincoinid= row.autoid;
      const link ='/FabiNew/FBorder_info?autoinid='+maincoinid+''
      console.log(link);
      this.navigateTo(link);
      // this.navigateTo(api, {
      //   maincoinid: data.maincoinid,
      //   coinid: data.coinid
      // });
    },
  }
};
</script>
<style lang="scss" scoped>
.break-line {
  @include breakLine;
}
$mr: 11px;
$border: 1px solid #e5e5e5;
.row {
  @include textVcenter();
  span {
    display: block;
    box-sizing: border-box;
  }
  .span-lf {
    flex: 4;
    padding-right: 15px;
    text-align: right;
  }

  .span-rt {
    flex: 5;
    padding-left: 15px;
  }
}
.container {
  min-height: calc(100% - 294px);
  padding: 30px 0;
  width: 77%;
  margin: 0 auto;
  .el-main {
    padding-top: 0;
  }
}
.container2 {
  min-height: calc(100% - 294px);
  padding: 0px 0;
  width: 77%;
  margin: 0 auto;
  .el-main {
    padding-top: 0;
  }
}
.el-container {
  border-bottom: 1px solid  #ffffff;
  border-top:1px solid  #ffffff;
  .form-wrap {
    width: 48.65%;
    .break-line {
      margin-top: 12px;
    }
    .total {
      margin-top: 19px;
    }
    button {
      margin-top: 22px;
    }
    .account {
      margin-top: 14px;
      a {
        color: $color-danger;
      }
    }
    .input-group {
      margin-top: 19px;
      .unit {
        line-height: 40px;
        color: #333;
        padding-right: 6px;
      }
      .el-input {
        margin-top: 10px;
      }
      .hint {
        display: inline-block;
        margin-top: $mr;
      }
    }
  }
  .warning-box {
    border: $default-border;
    padding: 20px;
    margin-top: 20px;
    h3 {
      line-height: 2;
    }
    span {
      line-height: 1.5;
    }
  }
}
.panel-container {
  .panel-header {
    margin: 30px 0 12px 0;
  }
}
.top_title{
  color: #333;padding:15px 0;
  .pright{line-height: 24px;margin-left: 12px;}
}
.main-container{min-height: 80vh;}
// 内容部分
.main_cont{margin-top: 30px;}
.table-wrap {
  margin-right: 2px;
  border: none;
  border-bottom: none;
  border-right: none;
}
.title {
  margin-bottom: 25px;
}
span {
  &.status-0 {
    color: $color-success;
  }
  &.status-1 {
    color: #999;
  }
}
.info_box{
  .m15{margin: 12px 0;}
  .w120{width: 120px;}
  .w400{width: 400px;}
  a{color: red;}
}
.color-danger {
      color: $color-danger;
    }
.peo_info{border-top: 1px dashed #e5e5e5;}
.upload-file {
  margin-top: 10px;
  input {
    opacity: 0;
    position: absolute;
    z-index: 99;
    height: 100%;
  }
}
.vertical-line {
  height: 360px;
  width: 1px;
  background: $bd-color;
  transform: scaleX(0.5);
  bottom: 0;
}
.photo-preivew {
  margin-top: 20px;
  display: block;
  // width: 180px;
  max-width: 300px;
  margin-left: 12px;
  img {
    width: 100%;
    max-width: 300px;
  }
  &:first-child {
    margin-left: 0;
  }
}
.img_w300{
  max-width: 300px;
  img{max-width: 300px;}
  }
.deshd_bor{border-top: 1px dashed #eeeeee;padding-top: 10px;}  
</style>
